<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted,onBeforeUnmount } from "vue";
import { ref } from "vue";
import "echarts-liquidfill";
const tableData = [
  {
    date: "西北区域",
    name: "12000",
    address: "02/7",
  },
  {
    date: "西南区域",
    name: "11000",
    address: "02/7",
  },
  {
    date: "东西区域",
    name: "12000",
    address: "02/7",
  },
  {
    date: "华北区域",
    name: "12000",
    address: "02/7",
  },
  {
    date: "苏皖区域",
    name: "12000",
    address: "02/7",
  }];
const value2 = ref(true);
var myChart:any = null;
onMounted(() => {
  var main:any = document.getElementById("main");
  myChart = echarts.init(main);
  myChart.setOption({
    backgroundColor: "rgba(0, 0, 0, 0)",
    animation: true,
    title: {
      text: 1500,
      // "subtext": "正常运行设备",
      x: "center",
      y: "center",
      textStyle: {
        color: "yellow",
        fontSize: 16,
        fontWeight: 700,
        align: "center",
        width: "200px",
      },
      // "subtextStyle": {
      //   "color": "#eee",
      //   "fontSize": 8,
      //   "fontWeight": "normal",
      //   "align": "center"
      // }
    },
    legend: {
      textStyle: {
        color: "#fff",
        fontSize: 14,
      },
      icon: "circle",

      right: "0",
      bottom: "0",
      data: ["供配电", "给排水", "暖通", "供热"],
    },
    series: [
      {
        type: "pie",
        center: ["50%", "50%"],
        radius: ["40%", "53%"],
        color: ["#FEE449", "#00FFFF", "#00FFA8", "#9F17FF"],
        startAngle: 46,
        labelLine: {
          normal: {
            length: 5,
          },
        },
        label: {
          normal: {
            formatter: "{per|{d}%} ",
            backgroundColor: "rgba(255, 147, 38, 0)",
            borderColor: "transparent",
            borderRadius: 4,
            rich: {
              a: {
                color: "#999",
                lineHeight: 22,
                align: "center",
              },
              hr: {
                borderColor: "#aaa",
                width: "100%",
                borderWidth: 1,
                height: 0,
              },
              b: {
                color: "#b3e5ff",
                fontSize: 14,
                lineHeight: 10,
              },
              c: {
                fontSize: 14,
                color: "#eee",
              },
              per: {
                color: "#FDF44E",
                fontSize: 14,
                padding: [5, 8],
                borderRadius: 2,
              },
            },
            textStyle: {
              color: "#fff",
              fontSize: 14,
            },
          },
        },
        data: [
          {
            name: "供配电",
            value: 80,
          },
          {
            name: "给排水",
            value: 12,
          },
          {
            name: "暖通",
            value: 26,
          },
          {
            name: "供热",
            value: 24,
          },
        ],
      },
      {
        type: "pie",
        center: ["50%", "50%"],
        radius: ["35%", "36%"],
        label: {
          show: false,
        },
      },
    ],
  });
  var main1:any = document.getElementById("main1")
  myChart = echarts.init(main1);
  myChart.setOption({
    // var option1 = {
    tooltip: {},
    xAxis: {
      data: ["11/19", "11/20", "11/22", "11/23", "11/24", "11/26", "11/28", ""],
      axisLine: {
        show: false, //是否显示x轴线
      },
      axisTick: {
        show: false, //是否显示短标记
      },
      splitLine: {
        show: true,
        lineStyle: {
          //分割线样式
          type: "solid",
          color: "#375674", //分割线类型
        },
      },
      axisLabel: {
        fontSize: "12",
        color: "#6699ff", //标记颜色
      },
    },
    yAxis: {
      name: "单位 w",
      nameTextStyle: { color: "#fff" },
      nameGap: "5",
      splitLine: {
        //分割线
        lineStyle: {
          //分割线样式
          type: "solid",
          color: "#375674",
          //分割线类型
        },
        show: true, //是否显示分割线
      },
      axisLabel: {
        fontSize: "10",
        color: "#6699ff", //标记颜色
      },
    },
    series: [
      {
        type: "line",
        smooth: true,
        data: [100, 200, 688, 851, 650, 160, 300, 200],
      },
    ],
    // }
  });
  //环形
  var liquidFill:any = document.getElementById("liquidFill");
  myChart = echarts.init(liquidFill);
  var value = 0.4;
  var data = [value, value, value, value, value];
  myChart.setOption({
    backgroundColor: "rgba(0,0,0,0)",
    graphic: [
      {
        type: "group",
        left: "center",
        bottom: 10,
        children: [
          {
            type: "text",
            z: 100,
            left: "10",
            top: "middle",
          },
          {
            type: "text",
            z: 100,
            left: "120",
            top: "middle",
            style: {
              fill: "#000",
              text: "128G",
              font: "24px Microsoft YaHei",
            },
          },
        ],
      },
    ],
    series: [
      {
        type: "liquidFill",
        radius: "70%",
        center: ["50%", "40%"],
        data: data,
        backgroundStyle: {
          borderWidth: 5,
          borderColor: "#1daaeb",
          color: "rgba(0,0,0,0)",
        },
        label: {
          normal: {
            formatter: (value * 100).toFixed(0) + "%",
            textStyle: {
              fontSize: 20,
            },
          },
        },
      },
    ],
  });
});
onBeforeUnmount(()=>{
  myChart && myChart.clear();
  if (myChart != null) {
      myChart.dispose()
      myChart = null;
  }
  window.removeEventListener("resize", resize);
})
//页面改变重绘图表
var resize = ()=> myChart.resize();
window.addEventListener('resize',resize) 

</script>
<template>
  <div class="box">
    <div class="visualization_third">
      <div class="left">
        <div class="top">
          <div class="head">
            <p>设备资产数量</p>
            <!-- 线段 -->
            <div class="line">
              <div class="one"></div>
              <div class="two"></div>
              <div class="there"></div>
              <div class="four"></div>
              <div class="four"></div>
              <div class="four"></div>
              <div class="wu"></div>
              <div class="wu"></div>
              <div class="four"></div>
            </div>
            <h3><i>1500</i></h3>
            <div class="lin1"></div>
            <div class="text">设备数量总数（件）</div>
            <div class="echarts">
              <el-row id="main"></el-row>
            </div>
          </div>
          <div class="center">
            <p>供配电设备运行状态</p>
            <!-- 线段 -->
            <div class="line">
              <div class="one"></div>
              <div class="two"></div>
              <div class="there"></div>
              <div class="four"></div>
              <div class="four"></div>
              <div class="four"></div>
              <div class="wu"></div>
              <div class="wu"></div>
              <div class="four"></div>
            </div>
            <div class="echarts1">
              <el-row id="main1"></el-row>
            </div>
          </div>
          <div class="foot">
            <!-- <div class="last"> -->
            <p class="last">夜景照明</p>
            <!-- 线段 -->
            <div class="line">
              <div class="one"></div>
              <div class="two"></div>
              <div class="there"></div>
              <div class="four"></div>
              <div class="four"></div>
              <div class="four"></div>
              <div class="wu"></div>
              <div class="wu"></div>
              <div class="four"></div>
            </div>
            <div class="btns">
              <div class="btns">
                <div class="btn">
                  <img
                    src="https://cdn7.axureshop.com/demo/1968221/images/%E5%9B%AD%E5%8C%BA%E8%AE%BE%E5%A4%87%E5%88%86%E6%9E%90/u6259.png"
                    alt="" />
                  <div class="jingdeng">警灯1</div>
                  &emsp;
                  <el-switch v-model="value2" class="ml-2"
                    style="
                                                                                                                                                                                                                                                                                                      --el-switch-on-color: yellow;
                                                                                                                                                                                                                                                                                                      --el-switch-off-color: rgba(255, 255, 255, 0.15);
                                                                                                                                                                                                                                                                                                    " />
                </div>

                <div class="btn">
                  <img
                    src="https://cdn7.axureshop.com/demo/1968221/images/%E5%9B%AD%E5%8C%BA%E8%AE%BE%E5%A4%87%E5%88%86%E6%9E%90/u6259.png"
                    alt="" />
                  <div class="jingdeng">警灯2</div>
                  &emsp;
                  <el-switch v-model="value2" class="ml-2"
                    style="
                                                                                                                                                                                                                                                                                                      --el-switch-on-color: yellow;
                                                                                                                                                                                                                                                                                                      --el-switch-off-color: rgba(255, 255, 255, 0.15);
                                                                                                                                                                                                                                                                                                    " />
                </div>
                <div class="btn">
                  <img
                    src="https://cdn7.axureshop.com/demo/1968221/images/%E5%9B%AD%E5%8C%BA%E8%AE%BE%E5%A4%87%E5%88%86%E6%9E%90/u6259.png"
                    alt="" />
                  <div class="jingdeng">警灯3</div>
                  &emsp;
                  <el-switch v-model="value2" class="ml-2"
                    style="
                                                                                                                                                                                                                                                                                                      --el-switch-on-color: yellow;
                                                                                                                                                                                                                                                                                                      --el-switch-off-color: rgba(255, 255, 255, 0.15);
                                                                                                                                                                                                                                                                                                    " />
                </div>
                <div class="btn">
                  <img
                    src="https://cdn7.axureshop.com/demo/1968221/images/%E5%9B%AD%E5%8C%BA%E8%AE%BE%E5%A4%87%E5%88%86%E6%9E%90/u6259.png"
                    alt="" />
                  <div class="jingdeng">警灯4</div>
                  &emsp;
                  <el-switch v-model="value2" class="ml-2"
                    style="
                                                                                                                                                                                                                                                                                                      --el-switch-on-color: yellow;
                                                                                                                                                                                                                                                                                                      --el-switch-off-color: rgba(255, 255, 255, 0.15);
                                                                                                                                                                                                                                                                                                    " />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="main"></div>
      <div class="right">
        <div class="head">
          <p>供水系统</p>
          <!-- 线段 -->
          <div class="line">
            <div class="one"></div>
            <div class="two"></div>
            <div class="there"></div>
            <div class="four"></div>
            <div class="four"></div>
            <div class="four"></div>
            <div class="wu"></div>
            <div class="wu"></div>
            <div class="four"></div>
          </div>
          <div class="rbox">
            <div class="lef">
              <span>生活水池</span>
              <h3><i>3.1</i></h3>
              <p>设备名称</p>
            </div>
            <div class="lef">
              <span>生活水池</span>
              <h3><i>2.6</i></h3>
              <p>设备名称</p>
            </div>
            <div class="lef">
              <span>生活水池</span>
              <h3><i>4.5</i></h3>
              <p>设备名称</p>
            </div>
          </div>
          <div class="linen"></div>
          <!-- 数据 -->
          <!-- <div class="shuju"> -->
          <div>
            <el-table :data="tableData"
              style="width: 100% ;
                                                                                                           background-color: transparent"
              :header-cell-style="{
                background: 'transparent',
                color: '#027db4',
              }">
              <el-table-column prop="date" width="150" />
              <el-table-column prop="name" width="170" />
              <el-table-column prop="address" />
            </el-table>
          </div>
        </div>
        <!-- </div> -->
        <div class="center">
          <p>监控系统</p>
          <!-- 线段 -->
          <div class="line">
            <div class="one"></div>
            <div class="two"></div>
            <div class="there"></div>
            <div class="four"></div>
            <div class="four"></div>
            <div class="four"></div>
            <div class="wu"></div>
            <div class="wu"></div>
            <div class="four"></div>
          </div>
          <div class="img">
            <img
              src="https://cdn7.axureshop.com/demo/1968221/images/%E5%9B%AD%E5%8C%BA%E9%A9%BE%E9%A9%B6%E8%88%B1/u5546.png"
              alt="" />
          </div>
        </div>
        <div class="foot">
          <p>供暖系统</p>
          <!-- 线段 -->
          <div class="line">
            <div class="one"></div>
            <div class="two"></div>
            <div class="there"></div>
            <div class="four"></div>
            <div class="four"></div>
            <div class="four"></div>
            <div class="wu"></div>
            <div class="wu"></div>
            <div class="four"></div>
          </div>
          <!-- 环形 -->
          <!-- <p class="nuan">供暖压力</p> -->
          <div class="huan">
            <el-row id="liquidFill"></el-row>
            <div class="nuan">
              <div class="A1">
                <span>A1楼地暖设备&emsp;&emsp;正常</span>
              </div>
              <div class="A1">
                <span>A2楼地暖设备&emsp;&emsp;正常</span>
              </div>
              <div class="A1">
                <span>A3楼地暖设备&emsp;&emsp;正常</span>
              </div>
              <div class="A1">
                <span>A4楼地暖设备&emsp;&emsp;正常</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}

.box {
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
  background: white;
  list-style: none;
}

.box .visualization_third {
  height: 100%;
  background: url("https://cdn7.axureshop.com/demo/1968221/images/%E5%9B%AD%E5%8C%BA%E8%AE%BE%E5%A4%87%E5%88%86%E6%9E%90/u6153.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: space-between;

  .left {
    flex: 3;

    .top {
      height: 100%;
      display: flex;
      flex-direction: column;

      div {
        flex: 4;
      }

      .foot {
        flex: 3;
      }

      .echarts {
        height: 100%;
      }

      .echarts1 {
        height: 100%;
      }

      .btns {
        height: 100%;

        .btns {
          height: 100%;
        }
      }
    }
  }

  .main {
    flex: 6;
  }

  .right {
    flex: 3;
    display: flex;
    flex-direction: column;

    .head {
      flex: 6;
    }

    .center {
      flex: 4;
    }

    .foot {
      flex: 4;

      .huan {
        justify-content: center;
      }
    }
  }
}

.box .visualization_third .left {
  display: flex;
  flex-direction: column;
  background: linear-gradient(to right,
      rgba(0, 0, 0, 0.5) 90%,
      rgba(150, 150, 150, 0.6));
  color: white;
}

p {
  font-size: 18px;
  color: white;
  margin-top: -10px;
  padding: 15px 0 5px 20px;
  /* margin-top: -10px; */
}

.line {
  display: flex;
}

.one {
  margin-left: 15px;
  width: 30px;
  height: 2px;
  background: blue;
}

.two {
  margin-left: 2px;
  width: 3px;
  height: 2px;
  background: #aaa;
}

.there {
  margin-left: 2px;
  width: 80%;
  height: 2px;
  background: #aaa;
}

.four {
  margin: 0 1px;
  width: 5px;
  height: 2px;
  background: blue;
}

.wu {
  margin: 0 1px;
  width: 5px;
  height: 2px;
  background: yellow;
}

h3 {
  color: yellow;
  text-align: center;
  padding: 3px 0;
  font-size: 24px;
  font-weight: bolder;
}

.line {
  margin: auto;
}

.box .visualization_third .left .top .text {
  text-align: center;
  font-size: 16px;
  color: #fff;
}

.box .visualization_third .left .echarts {
  margin-top: 10px;
}

.box .visualization_third .left .echarts #main {
  margin: auto;
  width: 280px;
  height: 230px;
  font-size: 16px;
  margin-top: -20px;
}

.box .visualization_third .left .echarts1 {
  margin-top: -30px;
  padding: 10px;
}

.box .visualization_third .left .echarts1 #main1 {
  width: 380px;
  height: 270px;
  font-size: 16px;
  margin: auto;
  // background: red;
}

.box .visualization_third .left .last {
  margin-top: -55px;
}

.box .visualization_third .left .btns {
  width: 300px;
  margin: auto;
  display: flex;
  margin-top: 10px;
  flex-wrap: wrap;
}

.box .visualization_third .left .btns .btn {
  position: relative;
  margin: 10px;
  width: 45%;
  display: flex;
  height: 40%;
}

.box .visualization_third .left .btns .btn .jingdeng {
  position: absolute;
  left: 90px;
  top: 35px;
  font-size: 14px;
  color: yellow;
}

.box .visualization_third .left .btns .btn img {
  width: 70px;
  margin-bottom: 10px;
}

.box .visualization_third .right {
  background: linear-gradient(to left,
      rgba(0, 0, 0, 0.5) 90%,
      rgba(150, 150, 150, 0.6));
  color: white;
}

.box .visualization_third .right .rbox {
  width: 100%;
  margin-top: 10px;
  /* background: red; */
  height: 13%;
  display: flex;
  justify-content: space-around;
}

.box .visualization_third .right .rbox .lef {
  width: 24%;
  height: 30px;
  background: linear-gradient(to right,
      rgba(0, 0, 0, 0.5) 20%,
      rgba(28, 74, 228, 0.4) 40%,
      rgba(0, 0, 0, 0.5));
  border-left: 1px solid blue;
  border-right: 1px solid blue;
}

.box .visualization_third .right .rbox .lef span {
  font-size: 10px;
  text-align: center;
  margin-left: 5px;
}

.box .visualization_third .right .rbox .lef h3 {
  margin-top: 20px;
  font-weight: bolder;
  font-size: 22px;
}

.box .visualization_third .right .rbox .lef p {
  margin-top: -15px;
  font-size: 16px;
  color: rgb(0, 136, 226);
}

.box .visualization_third .right .linen {
  width: 90%;
  height: 0.5px;
  background-color: rgb(0, 136, 226);
  margin: auto;
  margin-top: 60px;
}

// .box .visualization_third .right .shuju {
//   margin-top: 5px;
//   width: 100%;
//   height: 57%;
//   background: red;
//   display: flex;
//   margin: auto;
// }

.box .visualization_third .right .img {
  margin-left: 10%;
  margin-top: 15px;
  height: 20%;
}

.box .visualization_third .right .img img {
  border: 1px solid rgb(0, 136, 226);
  margin: auto;
  margin-top: 10px;
  width: 90%;
}

/* .box .visualization_third .right .nuan {
  text-align: center;
  color: rgb(0, 136, 226);
} */
.box .visualization_third .right .huan {
  display: flex;
  margin-top: 20px;
}

.box .visualization_third .right #liquidFill {
  /* width: 90%;
  height: 30%; */
  width: 200px;
  height: 200px;
  margin-left: -20px;
  background: rgba(0, 0, 0, 0);
  /* background: red; */
  /* background: red; */
}

.box .visualization_third .right .A1 {
  width: 130px;
  height: 28px;
  border-left: 1px solid blue;
  border-right: 1px solid blue;
  margin-top: 10px;
  background: linear-gradient(to right,
      rgba(13, 22, 127, 0.5) 20%,
      rgba(140, 169, 213, 0.4) 60%,
      rgba(29, 5, 107, 0.5));
}

.box .visualization_third .right .A1 span {
  padding: 2px;
  font-size: 12px;
  color: yellow;
}

.el-table {
  --el-table-tr-bg-color: rgba(0, 0, 0, 0);
  --el-table-border: none;
  --el-table-text-color: white;
  --el-table-border-color: none;
  --el-table-row-hover-bg-color: none;
}
</style>
